<template>
  <div class="adminHandle" >
    <h3>请假管理</h3>
    <div class="showmsg" v-show="!isedit">
        <div class="tablelist">
          <template>
            <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                prop="id"
                label="申请id"
                width="90px">
              </el-table-column>
              <el-table-column
                prop="startdate"
                label="开始时间">
              </el-table-column>
              <el-table-column
                prop="enddate"
                label="结束时间">
              </el-table-column>
              <el-table-column
                prop="isPass"
                label="审核"
                width="90px">
                <template slot-scope="scope">
                  <img class="pic" v-show="scope.row.isPass" src="../../pages/admin/assets/correct.png">
                  <img class="pic" v-show="!scope.row.isPass" src="../../pages/admin/assets/close.png">
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      <div style="padding-top: 20px"><el-button type="primary" plain @click="goedit()">添加申请</el-button></div>
    </div>
    <div class="editmsg"  v-show="isedit">
      <el-form ref="form"  label-width="80px" @submit.native.prevent>
        <el-form-item label="请假时间">
          <el-col :span="11">
            <el-input suffix-icon="el-icon-date" placeholder="（开始时间）YYYY-MM-DD"
                      v-model="submitData.startDate"></el-input>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-input suffix-icon="el-icon-date" placeholder="（结束时间）YYYY-MM-DD" v-model="submitData.endDate"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="请假原因">
          <el-input type="textarea" v-model="submitData.leaveMsg"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交<i class="el-icon-upload el-icon--right"></i> </el-button>
          <el-button type="primary" @click="quitedit">返回<i class="el-icon-back el-icon--right"></i> </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

export default {
  name:"StudentLeaveAdmin",
  data() {
    return {
      submitData:{
        startDate:'',
        endDate:'',
        leaveMsg:'',

      },
      isedit:false,
      tableData: []
    }
  },
  methods:{
    goedit(){
      this.isedit = true
    },
    quitedit(){
      this.isedit = false
    },
    onSubmit(){
      axios.defaults.headers.common["token"] = this.token;
      axios.post((this.ip + '/leaveMsg/'),JSON.stringify(this.submitData),{headers:
          {'Content-Type':'application/json'}}).then((response)=>{
        console.log(response)
        console.log(response.data)


      }).catch(function (error) {
        console.log(error);
      });

      this.submitData.dateb='';
      this.submitData.datee='';
      this.submitData.desc=''
    },
  },
  mounted(){
    this.ip = localStorage.getItem('ip');
    this.token = sessionStorage.getItem('token');

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/leaveMsg/')).then((response)=>{
      console.log(response)
      console.log(response.data)
      for(let i=0;i<response.data.length;i++){
        this.tableData.push({
          id:response.data[i].id,
          sid:response.data[i].snumber,
          startdate:response.data[i].startDate,
          enddate:response.data[i].endDate,
          isPass:response.data[i].isPass
        })
      }
    }).catch(function (error) {
      console.log(error);
    });

  }
}
</script>

<style scoped>
.adminHandle{
  width: 100%;
  padding: 5px 10px 0px 10px;
  margin: 20px 100px 0px 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);

}
.tablelist{
  padding-top: 20px;
}
.editmsg{
  width: 80%;
  padding-left: 100px;
}
.pic{
  width: 20px;
  height: 20px;
}
</style>

